<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <search-form
        v-model="queryParams"
        :fields="queryFormFields"
        @search="handleQuery"
        @reset="resetQuery"
    />

    <!-- 表格区域 -->
    <div class="content-wrapper">
      <statistics-table
          ref="tableRef"
          :data="tableData"
          :loading="loading"
          :query-params="queryParams"
          @sort-change="handleSortChange"
          @expand-change="handleExpand"
          @course-expand="handleCourseExpand"
      />

      <!-- 分页区域 -->
      <Pagination
          v-show="total > 0"
          :page-info="pageInfo"
          :total="total"
      />
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, reactive} from 'vue'
import {useTable} from './hooks/useTable'
import {queryFormFields} from './const'
import SearchForm from './components/SearchForm.vue'
import StatisticsTable from './components/StatisticsTable.vue'
import Pagination from './components/Pagination.vue'

const {
  tableData,
  loading,
  total,
  queryParams,
  initPage,
  handleQuery,
  resetQuery,
  handleSortChange,
  handleExpand,
  handleCourseExpand,
  handleSizeChange,
  handleCurrentChange
} = useTable()

// 分页信息
const pageInfo = reactive({
  request: queryParams,
  paging: () => {
    initPage()
  }
})

// 表格引用
const tableRef = ref()

onMounted(() => {
  initPage()
})
</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 84px);
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex: 1;
  background-color: #fff;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.table-container {
  flex: 1;
  overflow: auto;
}
</style>

